<template>
  <view class="content">
    <view class="text-area content">
		<u-tabs
		:list="list"
		@click="click"
		lineWidth="60">
		</u-tabs>
		<view v-show="activityIndex==0">
			<u--form
					labelPosition="left"
					:model="model"
					:rules="rules"
					ref="uForm"
			>
				<u-form-item
						labelWidth="80"
						label="唯一编码:"
						prop="uuid"
				>
					<u--input
						v-model="model.uuid"
						placeholder="请输入唯一编码"
						border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						labelWidth="80"
						label="手机号码:"
						prop="phone"
				>
					<u--input
						v-model="model.phone"
						border="none"
						placeholder="请输入换绑的手机号码"
					></u--input>
				</u-form-item>
				<u-form-item
						labelWidth="80"
						label="密码:"
						prop="password"
				>
					<u--input
						v-model="model.password"
						border="none"
						type='password'
						placeholder="请输入换绑的密码"
					></u--input>
				</u-form-item>
				<u-form-item
					label="验证码:"
					prop="code"
					labelWidth="80"
					borderBottom
				>
					<u--input
						v-model="model.code"
						border="none"
						placeholder="请填写验证码"
					></u--input>
					<u-toast ref="uToast"></u-toast>
					<u-code seconds="20" ref="uCode" @end="codeDisabled = false" @start="codeDisabled = true"
						    keep-running
						    change-text="倒计时XS"
							@change="codeChange">
					</u-code>
					<u-button
						slot="right"
						type="primary"
						@tap="getCode"
						:text="tips"
						size="small"
						:disabled="codeDisabled"
					></u-button>
				</u-form-item>
			</u--form>
			<u-button @click="submit" type="primary">换  绑</u-button>
		</view>
		<view v-show="activityIndex==1">
			<u--form
					labelPosition="left"
					:model="model"
					:rules="rules"
					ref="uForm"
			>
				<u-form-item
						label="姓名"
						prop="请输入姓名"
						borderBottom
				>
					<u--input
							v-model="model.userInfo.name"
							border="none"
					></u--input>
				</u-form-item>
			</u--form>
		</view>

    </view>
  </view>
</template>

<script>
import { aesEncrypt, aesDecrypt } from '@/js_sdk/encryption/utils';
import { getPhoneCode, bindApi } from '@/api/open/gamebind.js';
  export default {
    data() {
      return {
		activityIndex:0,
        list: [{
          name: '手机换绑',
        }, {
          name: '手机解绑',
        }
		],
		model:{
			userInfo: {
						name: '',
						sex: '',
					},

		},
		rules:{
			// 字段名称
			phone: [
				{
					required: true,
					message: '请输入手机号',
					trigger: ['change','blur'],
				},
				{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return uni.$u.test.mobile(value);
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}
			]
		},
		tips:"",
		codeDisabled:false,
      }
    },
	methods: {
		click(item,index) {
			this.activityIndex = item.index
		},
		submit() {
			this.$refs.uForm.validate().then(res => {
				this.bind()
			}).catch(errors => {
			})
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if(!this.model.uuid) return uni.$u.toast('请输入UUID');
			if(!this.model.phone) return uni.$u.toast('请输入电话号码');
			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				})
				let params = {
					uuid:this.model.uuid,
					phone:this.model.phone,
				};
				getPhoneCode(params).then(res=>{
					if(res.code==200){
						if(res.msg.indexOf('\"status\":1')>=0){
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}else{
							uni.$u.toast('验证码发送失败');
						}
					}else{
						uni.$u.toast(res.msg);
					}
				}).catch(err=>{
				}).finaly(res=>{
					uni.hideLoading();
				})
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		bind(){
			uni.showLoading({
				title: '正在绑号'
			})
			let params = {
				uuid:this.model.uuid,
				phone:this.model.phone,
				code:this.model.code,
				password:this.model.password,
			};
			bindApi(params).then(res=>{
				if(res.code==200){
					if(res.msg.indexOf('\"status\":1')>=0){
						uni.$u.toast('绑号成功');
					}else{
						uni.$u.toast('绑号失败');
					}
				}else{
					uni.$u.toast(res.msg);
				}
			}).catch(err=>{
			}).finaly(res=>{
				uni.hideLoading();
			})
		}
	},
    onLoad: function() {
		console.log(uni.$u.config.v);
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>
